<!-- 
   element表格分页组合封装组件
  -->
<template>
  <div>
    <el-table
      :data="tableData"
      border
      align="center"
      style="width: 100%"
      size="mini"
    >
      <template v-for="(item, index) in tableListData">
        <el-table-column
          v-if="item.type === 'index'"
          align="center"
          type="index"
          :width="item.width"
          :key="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column
          v-if="item.type === undefined"
          :prop="item.prop"
          align="center"
          :label="item.label"
          :width="item.width"
          :key="index"
          :style="item.style"
          :show-overflow-tooltip="'' || item.tooltiop"
        >
        </el-table-column>
        <el-table-column
          v-if="item.type === 'date'"
          :prop="item.prop"
          align="center"
          :label="item.label"
          :width="item.width"
          :key="index"
          :show-overflow-tooltip="'' || item.tooltiop"
        >
          <template slot-scope="scope">
            <div :style="item.style ? ((Date.parse(scope.row[item.prop]) - Date.parse(new Date()))/(1*24*60*60*1000) < 10 && (Date.parse(scope.row[item.prop]) - Date.parse(new Date()))/(1*24*60*60*1000) > 0  ? 'color:#FFA500' : (Date.parse(scope.row[item.prop]) - Date.parse(new Date()))/(1*24*60*60*1000) < 0 ? 'color:red' : 'color:blue') : ''">
              {{ scope.row[item.prop] | formatDate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'html'"
          :prop="item.prop"
          align="center"
          :label="item.label"
          :width="item.width"
          :key="index"
          :show-overflow-tooltip="'' || item.tooltiop"
        >
          <template slot-scope="scope">
            <div v-html="scope.row[item.prop]">
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'wordbook'"
          :prop="item.prop"
          align="center"
          :label="item.label"
          :width="item.width"
          :key="index"
        >
          <template slot-scope="scope">
            <div :style="item.wordbookList(scope.row[item.prop]) === '下发补正/审查意见' ? 'color:red' : ''">
              {{ item.wordbookList(scope.row[item.prop]) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'btn'"
          :prop="item.prop"
          :label="item.label"
          :fixed="'' || item.fixed"
          :width="item.width"
          align="center"
          :key="index"
        >
          <!--<template slot-scope="scope">
            <el-button
              v-for="(item, index) in tableBtn"
              :type="item.btnType"
              size="mini"
              plain
              :key="index"
              @click="handleClick(scope.row, item.handleFn)"
              >{{ item.name }}</el-button
            >
          </template>-->
          <template slot-scope="scope">
            <span
              class="span-btn-ml"
              v-for="(item, index) in tableBtn"
              :key="index"
            >
              <el-button
                v-if="item.type === undefined"
                :type="item.btnType"
                size="mini"
                plain
                @click="handleClick(scope.row, item.handleFn)"
                >{{ item.name }}</el-button
              >
              <el-button
                v-if="
                  item.type == 'isShow' &&
                    scope.row[item.isShowStatus] == item.isShowValue
                "
                :type="item.btnType"
                size="mini"
                plain
                @click="handleClick(scope.row, item.handleFn)"
                >{{ item.name }}</el-button
              >
              <el-button
                v-if="
                  item.type == 'isNoShow' &&
                    item.isShowValue.indexOf(scope.row[item.isShowStatus]) == -1
                "
                :type="item.btnType"
                size="mini"
                plain
                @click="handleClick(scope.row, item.handleFn)"
                >{{ item.name }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type === 'a'"
          :prop="item.prop"
          align="center"
          :label="item.label"
          :width="item.width"
          :key="index"
        >
          <template slot-scope="scope">
            <div>
              <span
                class="color-blue"
                @click="handleClickViewOther(scope.row)"
                title="查看详情"
              >
                {{ scope.row[item.prop] }}
              </span>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <template>
      <div class="page-div">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="currentData.currentPage || 1"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="currentData.size || 10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currentData.total || 0"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowPage: 1,
      limit: 10
    };
  },
  mounted() {},
  methods: {
    // 索引事件
    indexMethod(val) {
      return val + 1 + this.limit * (this.nowPage - 1);
    },
    // 按钮事件
    handleClick(row, fn) {
      // return this.$parent[fn](row);
      this.$emit(fn, row);
    },
    handleClickViewOther(val) {
      this.$emit("handleViewOther", val);
    },
    // 改变页码
    handleCurrentChange(val) {
      this.nowPage = val;
      // this.$parent.onPageChange(val);
      this.$emit("onPageChange", val);
    },
    // 改变每页数量
    handleSizeChange(val) {
      this.limit = val;
      // this.$parent.onSizeChange(val);
      this.$emit("onSizeChange", val);
    }
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    tableListData: {
      type: Array
    },
    tableBtn: {
      type: Array,
      default() {
        return {};
      }
    },
    currentData: {
      type: Object,
      required: true
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.page-div {
  margin-top: 5px;
  display: block;
  text-align: right;
}
</style>
